<%--
  Created by IntelliJ IDEA.
  User: jshand
  Date: 2022-01-01
  Time: 9:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="${pageContext.request.contextPath}/assets/css/front.css" rel="stylesheet" type="text/css" />
    <script src="${pageContext.request.contextPath}/"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/lib/layer/2.4/layer.js"></script>


</head>
<body>
<jsp:include page="include/top.jsp" ></jsp:include>

<form id="form">
    <div class="regist_warp">
        <div class="title">登录</div>
        <hr>
        <div class="label_username">用户名</div>
        <div class="inp_username">
            <input type="text" placeholder="用户名" id="username" name="username" required />

        </div>


        <div class="label_password">密码</div>
        <div class="inp_password">
            <input type="password" placeholder="密码" name="password" id="password" required />
        </div>


        <button type="button" onclick="login()">登录</button>
    </div>
</form>
<script>

    $(function(){
        //给表单 注册 验证的 类型
        $("#form").validate({
            rules:{
                username:{
                    required: true,
                    minlength: 3
                },
                password:{
                    required: true,
                    minlength: 3
                }
            },
            messages:{
                username: {
                    required: "请输入用户名",
                    minlength:"用户名至少3个字符"
                },
                password: {
                    required: "请输入密码",
                    minlength:"密码至少3个字符"
                }
            }
        })


    })



    //注册用户
    function login() {
        let passValidata = $("#form").valid()

        //表单验证通过了
        if(passValidata){
            let url = '${pageContext.request.contextPath}/login';
            $.ajax(url,{
                type:'post',
                dataType:'json',
                data:{
                    username:$("#username").val(),
                    password:$("#password").val()
                },
                success:function(ret){
                    if(ret.success){
                        layer.msg("登录成功");
                        location.href="${pageContext.request.contextPath}/user/home"
                    }else{
                        layer.alert("登录失败");
                    }
                }

            })
        }

    }
</script>


</body>
</html>
